<html>
<head>
   	<resource:autoComplete skin="default" />
   	<meta name="layout" content="main" charset=UTF-8" />
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA-Chw1OIC6GF7ScQxfz68TBT0x9fgrU1Vzjk1koqan7vu1-VekhQ7HeU54-MrY7JJRXpKJazsoZM--Q"
    type="text/javascript"></script>
    <script type="text/javascript">
    var usCenterPoint = new GLatLng(-6.055403,-36.537109)
    var usZoom = 7

    function load(pos) {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("mapa"))
        map.setCenter(usCenterPoint, usZoom)
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());

        directions = new GDirections(map);
        directions.load(pos);
      }
    }
    </script>
    
    <title>Mapa De Carona</title>
</head>
<body>
  <h1>Gerar Mapa</h1>
    <g:if test="${!session.usuario && !veioDoForm}">
       <g:form action="mapaDeCarona" method="post">
           <table border="0" style="width: 350px;">
           
           <tr>
              <td style="text-align: right;">Integrante 1</td>
              <td><richui:autoComplete name="integrante1" controller="integrante" action="pegarIntegrante" maxResultsDisplayed="5" forceSelection="true"/></td>
           </tr>
           
           <tr>
              <td style="text-align: right;">Integrante 2</td>
              <td><richui:autoComplete name="integrante2" controller="integrante" action="pegarIntegrante" maxResultsDisplayed="5" forceSelection="true"/></td>
           </tr>
           
           <tr>
              <td style="text-align: right;">Integrante 3</td>
              <td><richui:autoComplete name="integrante3" controller="integrante" action="pegarIntegrante" maxResultsDisplayed="5" forceSelection="true"/></td>
           </tr>
           
           <tr>
              <td style="text-align: right;">Nome da rua do evento</td>
              <td align="left"><input type="text" name="nomeRua"></td>
           </tr>
           
           <tr>
              <td style="text-align: right;">Número</td>
              <td align="left"><input type="text" name="numero"></td>
           </tr>

           <tr>
              <td style="text-align: right;">Cidade do evento</td>
              <td align="left"><input type="text" name="cidade"></td>
           </tr>

           <tr>
              <td style="text-align: right;">Estado do evento</td>
              <td align="left"><input type="text" name="estado" size="2" maxlength="2"></td>
           </tr>
 			
 			<tr>
            <td colspan="2" style="text-align: center;">
            <input type="submit" id="pesquisar" name="pesquisar" value="Pesquisar" class="botao"></td>
            </tr>
          </table>
        </g:form>
    </g:if>
    <g:else>
      <h3>Endereço Pesquisado:</h3>
      <div id="mapa" style="width: 600px; height: 400px"></div>
      <script type="text/javascript">
         load("${posicao}")
      </script>
    </g:else>
</body>